<template>
  <div ref="thickness" :style="{width: '100%', height: '320px'}"></div>
</template>

<script setup name="Thickness">

import * as echarts from 'echarts';
import { trendData } from '@/api/coal/realtimeData';

//import 'echarts-gl';
const thickness = shallowRef({})
const myChart = shallowRef({})

let flushThickness = ref<String>("");

const props = defineProps({
  deviceId: {
    type: Number,
    default: null,
  },
})

const selfName = ref('')
const xPoints = ref([])
const yAllPoints = ref([])
const yLeftPoints = ref([])
const yMiddlePoints = ref([])
const yRightPoints = ref([])


onMounted(() => {
  const resizeOb = new ResizeObserver((entries) => {
    for (const entry of entries) {
      echarts.getInstanceByDom(entry.target).resize();
    }
  })
  resizeOb.observe(thickness.value)
  initChart()
  //随着屏幕大小调节图表
  window.addEventListener("resize", () => {
    myChart.value.resize()
  });
  flushThickness = setInterval(()=>{
    // 根据设备id查询折线图数据
    initCharData().then(resp=>{
      myChart.value.setOption({
        xAxis: {
          data: xPoints.value,
        },
        series: [
          {
            data: yAllPoints.value
          },
          {
            data: yLeftPoints.value
          },
          {
            data: yMiddlePoints.value
          },
          {
            data: yRightPoints.value
          },]
      })
    })
  },1000*10)

})

function initChart() {
  nextTick(() => {
    myChart.value = echarts.init(thickness.value)
    initCharData().then(resp=>{
      initOption();
    })
  })
}

function initCharData(){
  return trendData(props.deviceId).then(resp=>{
    xPoints.value = resp.xPoints
    yAllPoints.value = resp.yAllPoints
    yLeftPoints.value = resp.yLeftPoints
    yMiddlePoints.value = resp.yMiddlePoints
    yRightPoints.value = resp.yRightPoints
    selfName.value =  '煤流厚度'
  })
}

function initOption(){
  let option = {
    animation: false,
    title: {
      text: '单位：cm'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['合计', '左', '中', '右']
    },
    grid: { //调整图表上下左右位置
      top:'15%',
      left: '3%',
      right: '5%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {
          name: "煤流厚度合计图"
        }
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xPoints.value,
      axisLabel : {
        showMaxLabel: true,
        interval : 'auto',
        rotate : 0
      }
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%'],
      max: 60,
    },
    series: [
      {
        name: '合计',
        type: 'line',
        smooth: true,
        data: yAllPoints.value
      },

      {
        name: '左',
        type: 'line',
        data: yLeftPoints.value
      },
      {
        name: '中',
        type: 'line',
        data: yMiddlePoints.value
      },
      {
        name: '右',
        type: 'line',
        data: yRightPoints.value
      },
    ]
  };
  myChart.value.setOption(option)

}

onBeforeUnmount(() => {
  clearInterval(flushThickness)
})

</script>
